<template>
    <div class="UserSetting">
        <el-button @click="messageFS('error')"> error </el-button>
        <el-button @click="messageFS('warning')"> warning </el-button>
        <el-button @click="messageFS('success')"> success </el-button>
        <el-button @click="messageFS()"> 普通 </el-button>
        <el-button @click="toAboutFS('AddUserDialog')"> 添加用户 </el-button>
        <el-button @click="toAboutFS('UserListDialog')"> 用户列表 </el-button>
        <el-button @click="toggleFS()">
            {{ isDarkMode }}切换深浅色模式
        </el-button>
        <el-button @click="systemFS()">系统默认</el-button>
    </div>
</template>

<script>
// @ is an alias to /src
import { ipcRenderer, nativeTheme } from 'electron';

export default {
    name: 'UserSetting',
    components: {},
    data() {
        return {
            isDarkMode: 'Toggle Dark Mode',
        };
    },
    mounted() {
        console.log(nativeTheme)
    },
    methods: {
        toAboutFS(name) {
            this.$bus.emit('APP_Dialog', {
                name: name || 'AddUserDialog',
                dataForm: {},
            });
        },
        toggleFS() {
            // 深浅色切换
            const isDarkMode = ipcRenderer.invoke('dark-mode:toggle');
            this.isDarkMode = isDarkMode ? 'Dark' : 'Light';
        },
        systemFS() {
            // 系统默认颜色
            ipcRenderer.invoke('dark-mode:system');
        },
        messageFS(type) {
            this.$MMEV.messageFS({
                type: type || '',
                showClose: true,
                message: '使用 MindMap 必须创建一个本地用户',
                duration: 0,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@media (prefers-color-scheme: dark) {
    .UserSetting {
    }
}
@media (prefers-color-scheme: light) {
    .UserSetting {
    }
}

.UserSetting {
}
</style>
